
<template>
  <view-page>
    <!-- <HeaderView /> -->
    <div class="bg"></div>

    <div class="container">
      <div class="header-title">
        <div class="left">
          <span class="material-symbols-outlined">chevron_left</span>
          <span class="text">我的预约</span>
        </div>
      </div>
      <ReportMenus :menus="menus" :showBg="true" />
      <div class="operate">
        <div class="top">
          <div class="title">我的预约</div>
          <div class="filter">
            <!-- <i class="icon"/> -->
            <span class="icon material-symbols-outlined"> filter_list </span>
            <span>按时间排序</span>
            <!-- <i class="icon"/> -->
            <span  class="icon material-symbols-outlined"> arrow_drop_down </span>
          </div>
        </div>

        <div class="tabs">
          <div class="tab-item" :class="{active: activeType === 0}" @touchstart.stop="() => handleActiveType(0)">全部</div>
          <div class="tab-item" :class="{active: activeType === 1}"  @touchstart.stop="() => handleActiveType(1)">检测中</div>
          <div class="tab-item" :class="{active: activeType === 2}" @touchstart.stop="() => handleActiveType(2)">已完成</div>
        </div>
      </div>
      <ReportCard :reportList="reportDataList" />
    </div>
    <CardView/>
    <FooterView />
  </view-page>
</template>

<script setup>
import {ref, computed} from 'vue'
import {filter} from 'lodash'
// import HeaderView from '@/components/Layout/HeaderView.vue';
import CardView from '@/components/Footer/CardView'
import FooterView from '@/components/Footer/FooterView.vue';
import ReportCard from './ReportCard.vue';
// import  from './UserReportCard.vue';
import ReportMenus from './ReportMenus.vue';

const activeType = ref(0)

const menus = ref([
  {
    id: 1,
    title: '我的送检',
    icon: 'assignment',
    path: '/mobile/my-submission',
  },
  {
    id: 2,
    active: true,
    title: '我的预约',
    icon: 'event_available',
    path: '/mobile/my-order',
  },
  {
    id: 3,
    title: '报告验伪',
    icon: 'barcode_scanner',
    path: '/mobile/my-report-result',
  },
  { id: 4, title: '送样单位', icon: 'home_work',path: '/mobile/my-report-list', },
  { id: 5, title: '地址信息', icon: 'pin_drop', path: '/mobile/my-report-company', },
  { id: 6, title: '个人信息', icon: 'badge', path: '/mobile/user-center', },
])

const reportList = ref([
  {
    id: 1, 
    title: '热解有机碳；总有机碳；', 
    count: 2, 
    status: '已预约', 
    desc: '油，气 ｜ 邮寄',
    address: '北京石油地质实验研究中心',
    user: '王晓蕾',
    phone: '18615508558'
  },
  {
    id: 2, 
    title: '双探头低真空场发射扫描电镜矿物扫描系统', 
    count: 2, 
    status: '已预约', 
    desc: 'Apreo,LoVac 30kv',
    address: '北京石油地质实验研究中心',
    user: '王晓蕾',
    phone: '18615508558'
  },
  {
    id: 3, 
    title: '热解有机碳；总有机碳；', 
    count: 2, 
    status: '已预约', 
    desc: '油，气 ｜ 邮寄',
    address: '北京石油地质实验研究中心',
    user: '王晓蕾',
    phone: '18615508558'
  },
  {
    id: 4, 
    title: '热解有机碳；总有机碳；', 
    count: 2, 
    status: '已完成', 
    desc: '油，气 ｜ 邮寄',
    address: '北京石油地质实验研究中心',
    user: '王晓蕾',
    phone: '18615508558'
  }
])

const reportDataList = computed(() => {
  if(activeType.value === 0) return reportList.value

  if(activeType.value === 1) {
    return filter(reportList.value, item => item.status === '检测中')
  }

  if(activeType.value === 2) {
    return filter(reportList.value, item => item.status === '已完成')
  }

  return reportList
}) 

const handleActiveType = (active) => {
  activeType.value = active
}
</script>

<style scoped lang="scss">

.container{
  position: relative;
  // margin-top: dpi(13rem);
  z-index: 1;
  .header-title{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: dpi(5rem);
    .left{
      display: flex;
      align-items: center;
      color: #fff;
      font-family: swiper-icons;
      text-transform: none !important;
      letter-spacing: 0;
      font-variant: initial;
      line-height: 1;
      .text{
        margin-left: dpi(4rem);
        font-family: PingFangSC-Semibold;
        font-size: dpi(4rem);
        color: #ffffff;
      }
    }
  }
}

.operate{
  margin: 0 dpi(5rem);
  margin-top: dpi(6rem);
  .top{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: dpi(5rem);
  }
  .title{
    font-family: PingFangSC-Semibold;
    font-size: dpi(3rem);
    color: #05204d;
  }
  .filter{
    display: flex;
    align-items: center;
    font-family: PingFangSC-Regular;
    font-size: dpi(2rem);
    color: #0571b0;
    > .icon{
      margin: 0 dpi(.6rem);
      display: block;
      width: dpi(2rem);
      height: dpi(2rem);
      font-size: dpi(2rem);
      color: #888888;
    }
  }

  .tabs{
    display: flex;
    .tab-item{
      display: flex;
      align-items: center;
      justify-content: center;
      flex: 1;
      height: dpi(6rem);
      font-family: PingFangSC-Semibold;
      font-size: dpi(2rem);
      cursor: pointer;
      &:not(&.active) {
        color: #888888;
        background-color: #f5f5f5;
      }
      &.active{
        color: #ffffff;
        background-color: #0571b0;
      }
    }
  }
}
</style>
